<script setup>
import { } from 'vue'
import { useAudioStore } from '@/stores/audioStore.js'

const useAudio = useAudioStore()
</script>

<template>
  <div class="phonorecord">
    <img class="imgAnimation" :src="useAudio.playSongInfo.al.picUrl + '?param=500y500'"
      :style="`animation-play-state: ${useAudio.playStaus ? 'running' : 'paused'}`" v-if="useAudio.playSongInfo.al">
    <img src="@/assets/image/login-bg.jpg" alt="" v-else>
    <div class="small-phonorexord"></div>
  </div>
</template>

<style scoped lang='scss'>
.phonorecord {
  margin-left: 50px;
  height: 500px;
  width: 500px;
  background-color: rgb(122, 122, 122);
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  margin-bottom: 10px;
  box-shadow: 0px 10px 15px rgb(171, 171, 171);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .imgAnimation {
    animation: rotateImg 20s infinite linear
  }

  .small-phonorexord {
    background-color: #ffffff;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0px 0px 10px rgb(77, 77, 77);
  }

  @keyframes rotateImg {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}
</style>
